<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>网友微笑分享原创Jquery实现瀑布流特效</title>
<meta name="Keywords" content="Jquery,div+css,JquerySchool" />
<meta name="description" content="JquerySchool" />


<link rel="stylesheet" type="text/css" href="css/pubu.css">
<style type="text/css">
body {
    padding:0;
    margin:0;
    background:url(../img/girl/bg.jpg);
}
img {
    border:none;
}
a {
    text-decoration: none;
}
#pubu {
	margin:0 auto;
	position:relative;
}
#pubu .box {
	width:280px;
	height:auto;
	padding:10px;
	float:left;
}
#pubu .box .pic {
	width:280px;
	height:auto;
    box-shadow:1px 1px 4px #ddd,-1px -1px 4px #ddd;
    border-radius:4px;
}
#pubu .box .pic img {
    display: block;
	width:250px;
    margin:0 auto;
    padding: 15px 0;
    cursor: pointer;
}

</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="../js/pubu.js"></script>

</head>
<body>
	<div id="pubu">
    
        <div class="box">
            <div class="pic">
                <img src="../img/girl/1.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../img/girl/2.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../img/girl/3.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../img/girl/4.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../img/girl/5.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../img/girl/6.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../img/girl/7.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../img/girl/8.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../img/girl/9.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../img/girl/10.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../img/girl/3.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../img/girl/4.jpg">
            </div>
        </div>
		 <div class="box">
            <div class="pic">
                <img src="../img/girl/5.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../img/girl/6.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="../img/girl/7.jpg">
            </div>
        </div>
        
	</div>
</body>
</html>